<template>
	<div id="Todolist">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>代办</span>
			</div>
			<el-collapse v-for="(item,key,index) in tableData" :key="index">
				<el-collapse-item :title="key" name="1">
					<el-card class="box-card">
						<el-table :data="item" style="width: 100%">
							<el-table-column prop="Title" label="标题" fixed width="350">
								<template slot-scope="scope">
                                    <el-link :underline="false" @click="sikpMyflow(scope.row)">{{scope.row.Title}}</el-link>
								</template>
							</el-table-column>
							<el-table-column prop="NodeName" label="节点" width="150"></el-table-column>
							<el-table-column prop="StarterName" label="发起人" width="150"></el-table-column>
							<el-table-column prop="RDT" label="发起日期" width="150"></el-table-column>
							<el-table-column prop="SDTOfNode" label="送达日期"></el-table-column>
							<el-table-column prop="NodeName" label="期限"></el-table-column>
							<el-table-column prop="NodeName" label="状态"></el-table-column>
							<el-table-column prop="WFState" label="类型">
								<template slot-scope="scope">
                                    <el-link :underline="false">{{scope.row.WFState == 5 ? '退回' : '代办'}}</el-link>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-collapse-item>
			</el-collapse>
            <div style="margin:10px 0;">
                <span style="font-weight: 500;font-size: 14px;margin-right:10px;color: #606266;">合计： {{count}}条</span>
                <el-link :underline="false">查看授权代办</el-link>
            </div>
		</el-card>
	</div>
</template>

<script>
export default {
	name: "Todolist",
	components: {},

	data() {
		return {
			title: "待办",
			tableData: {},
			count:0,
		};
	},

	beforeCreate() {},

	created() {
		this.loadData();
	},

	methods: {
		// 获取数据
		loadData() {
			let handler = new this.HttpHandler("BP.WF.HttpHandler.WF");
			handler.AddUrlData();
            let data = handler.DoMethodReturnString("Todolist_Init");
			this.filterData(JSON.parse(data));
		},

		// 过滤数据
		filterData(data) {
            console.log(data);
            this.count = data.length;
			data.forEach(item => {
				this.tableData[item.FlowName] = [];
			});
			data.forEach(item => {
				this.tableData[item.FlowName].push(item);
			});
			console.log(this.tableData);
		},

		//跳转myflow
		sikpMyflow(work){
			console.log(work);
			let params = {
				// title: work.Title,
				IsRead: work.IsRead,
				FK_Flow: work.FK_Flow,
				// flowName : work.FlowName,
				// nodeName : work.NodeName,
				// starterName : work.StarterName,
				// pri : work.PRI,
				FK_Node : work.FK_Node,
				FID : work.FID,
				WorkID : work.WorkID,
				PWorkID : work.PWorkID,
				Paras : work.AtPara ? work.AtPara : '',
			}
			// eslint-disable-next-line no-constant-condition
			while (true) {
				params.Paras = params.Paras.replace('@', '&');

				if (params.Paras.indexOf('@') < 0) {
					break;
				}
			}
			params.Paras = "1" + params.Paras;
			console.log(params);
			params.FromPage = 'Todolist';
			// this.$router.push("myFlow?FK_Flow=350");
			this.$router.push({name:"myflow",params});
		},
	},

	//监听
	computed: {},

	//监听后执行动作
	watch: {}
};
</script>

<style lang="less" scoped>
/deep/ .el-collapse {
	border: none;
}
/deep/ .el-collapse-item__wrap {
	border: none;
}
/deep/ .el-card {
	margin: 10px 0;
}
</style>